<template>
 
    <div style="width: 100%;">

        <!-- 头部模块 -->
        <el-header id="header">
            <CommonHeader>
              <el-button text @click=" toCreateCourse()">创建班级</el-button>
            </CommonHeader>
        </el-header>
        <!-- 主体内容 -->
        <el-main>
      <!-- 班级列表 -->

      <div v-for="(course,i) in courseList" :key="i" class="list" >
          <div class="courseItem-title">
            <img :src=baseurl+course.img alt="" style="height: 128px;">
            <h2>{{course.courseName}}</h2>
            <div class="courseItem-title-button">
              <span class="courseItem-title-button-span">{{course.courseDescription}}</span>
              <el-button plain @click="updateCourse(course)"><el-icon><EditPen /></el-icon></el-button>
              <!-- 创建班级 -->
              <el-button plain @click=" toCreateClass(course.id)"><el-icon><Plus /></el-icon></el-button>
              <el-button plain @click="delCourse(i)"><el-icon><Delete /></el-icon></el-button>
             
            </div>
           
           
          </div>
            <el-divider />
            <div class="courseItem">

              <!-- 空白页面 -->
              <div class="empty" v-if=" course.classList.length == 0">
                <el-icon @click="toCreateClass(course.id)" color="#9B9B9B"><Plus /></el-icon>
                
              </div>

               <div v-for="(classitem,index) in course.classList" :key="index" @click="to">
                <h3>{{classitem.className}}</h3>
                <p>{{classitem.introduce}}</p>
                <span class="courseItem-button">
                  <el-icon @click.stop="updateClass(classitem)" style="width: 1em; height: 1em; margin-right: 0.8rem"><EditPen /></el-icon>
                  <el-icon @click.stop="delClass(i,index)"  style="width: 1em; height: 1em; margin-right: 0.8rem"><Delete /></el-icon>
                </span>
                <span class="courseItem-span"><el-icon size="1rem"><Stamp /></el-icon>{{classitem.total}}</span>
                <span>{{classitem.code}}</span>
                
              </div>
            </div>
      </div>
  
       </el-main>

         <!-- 创建班级 -->
       
  <el-dialog v-model="classdialogFormVisible" title="添加班级" align-center width="40%" >
    <el-form :model="calssform" >
      <el-form-item label="班级名" :label-width="formLabelWidth">
        <el-input v-model="calssform.className" autocomplete="off" />
      </el-form-item>
      <el-form-item label="班级简介" :label-width="formLabelWidth">
        <el-input v-model="calssform.introduce" autocomplete="off" />
      </el-form-item>
      <el-form-item label="班级暗号" :label-width="formLabelWidth">
        <el-input v-model="calssform.code" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="classdialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="classsubmitFrom()">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>

<!-- 创建课程 -->
        
  <el-dialog v-model="dialogFormVisible" title="添加课程" align-center width="40%">
    <el-form :model="form" >
      <el-form-item label="课程名" :label-width="formLabelWidth">
        <el-input v-model="form.courseName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="课程描述" :label-width="formLabelWidth">
        <el-input v-model="form.courseDescription" autocomplete="off" />
      </el-form-item>
      <el-form-item label="添加课程封面" :label-width="formLabelWidth">

          <el-upload
          class="avatar-uploader"
          action="http://localhost:8080/fileControl/upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="form.imageUrl" :src=baseurl+form.imageUrl class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>

      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submitFrom()">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>

    </div>
</template>
  
 
  
  

  

<script>



import CommonHeader from '@/components/CommonHeader.vue'

import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus, SuccessFilled } from '@element-plus/icons-vue'
import { UploadProps } from 'element-plus'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'

import http from '../api/course'

export default {
    name: 'CouseView',
    
    data() {
        return {
          baseurl:this.$http.defaults.baseURL,
          updateOrCreateClass:false,
          updateOrCreateCourse:false,
          classdialogFormVisible:false,
          dialogFormVisible:false,
          formLabelWidth :'140px',
          calssform:{
            id:'',
            courseId:'',
            className:'',
            introduce:'',
            code:'',
          },
            form:{
              id:'',
              imageUrl:'',
              courseName:'',
              courseDescription:'',
            },
          
            isDel:true,
            courseList:[


            ],
          
        };
    },

    mounted() {
        var that = this;
      
        var teacherId = localStorage.getItem("token");
      //获取课程列表
      http.queryCourseClassList(teacherId).then((res)=>{

        if(res.code==1){
          that.courseList = res.data;
        }
      })

    },

    methods: {


      submitFrom(){
        this.dialogFormVisible = false;
        if(this.updateOrCreateCourse){
          http.updateCourse(this.form).then((res)=>{
            if(res.code == 1){

               this.courseList.forEach(element => {
                if(element.id == this.form.id){
                  element.courseName = this.form.courseName;
                  element.imageUrl=this.form.imageUrl;
                  element.courseDescription=this.form.courseDescription;
                }
               });
                
                ElMessage({
                  showClose: true,
                  message: '修改成功',
                  type: 'success',
                })
                }else{
                ElMessage({
                  showClose: true,
                  message: '修改失败',
                  type: 'error',
                })
                }
          });
        }else{

        //添加课程
        http.createCourse(this.form).then((res)=>{
          if(res.code == 1){

           
            this.courseList.push(res.data);
            //渲染列表
            ElMessage({
              showClose: true,
              message: '添加成功',
              type: 'success',
            })
          }else{
            ElMessage({
              showClose: true,
              message: '添加失败',
              type: 'error',
            })
          }
        });

      
      }

      },
      toCreateClass(courseId){

        this.calssform.className='';

       this.calssform.id = '';
      this.calssform.introduce='';

      this.calssform.code='';

        this.classdialogFormVisible = true;
        this.updateOrCreateClass = false;
        this.calssform.courseId = courseId; 
      },
      toCreateCourse(){

      this.form.imageUrl='';
      this.form.courseName= '';
      this.form.courseDescription = '';
        this.dialogFormVisible = true;
        this.updateOrCreateCourse = false;
        var teacherId = localStorage.getItem("token");
         this.form.id  = teacherId;


      },
      classsubmitFrom(){
        
        this.classdialogFormVisible = false;
       
        if(this.updateOrCreateClass){

          //修改班级
          http.updateClass(this.calssform).then((res)=>{

            if(res.code == 1){
              
            ElMessage({
              showClose: true,
              message: '修改成功',
              type: 'success',
                            });
                this.courseList.forEach(element => {

                  element.classList.forEach(e => {
                    if(e.id == this.calssform.id){

                      
                     e.className = this.calssform.className;
                     e.introduce = this.calssform.introduce;
                     e.code = this.calssform.code;

                    }
                  });

                });
                  
                }else{
                ElMessage({
                  showClose: true,
                  message: '修改失败',
                  type: 'error',
                })
                }
          });

        }else{

// 创建班级
          http.createClass(this.calssform).then((res)=>{
          if(res.code == 1){

           
            this.courseList.forEach(element => {
              if(element.id ==this.classfrom.courseId){
                element.classList.push(red.data);
              }
            });
            //渲染列表
            ElMessage({
              showClose: true,
              message: '添加成功',
              type: 'success',
            })
          }else{
            ElMessage({
              showClose: true,
              message: '添加失败',
              type: 'error',
            })
          }
        });

        }
        
       
      },

      handleAvatarSuccess( response,uploadFile){
        
       
        this.form.imageUrl = response.data.href;

      },

      beforeAvatarUpload(rawFile){
       
       if (rawFile.size / 1024 / 1024 > 2) {
            ElMessage.error('Avatar picture size can not exceed 2MB!')
            return false
          }
          return true
      },

     to(){

      this.$router.push('/index/courseDetail')

     },
     updateCourse(course){

      this.dialogFormVisible = true;
      this.updateOrCreateCourse = true;
      this.form.id = course.id;
      this.form.imageUrl=course.img;
      this.form.courseName= course.courseName;
      this.form.courseDescription = course.courseDescription;
      
        

     },
 
     delCourse(i){
      
      http.delCourse(this.courseList[i].id).then((res)=>{
        if(res.code == 1){

            ElMessage({
              showClose: true,
              message: '删除成功',
              type: 'success',
            });
            this.courseList.splice(i,1);
            }else{
            ElMessage({
              showClose: true,
              message: '删除失败',
              type: 'error',
            })
            }
      });
      
      // http
      
      

     },
     delClass(i,index){
     
       
      http.delClass(this.courseList[i].classList[index].id).then((res)=>{
        if(res.code == 1){

            ElMessage({
              showClose: true,
              message: '删除成功',
              type: 'success',
            });
            this.courseList[i].classList.splice(index,1);
            }else{
            ElMessage({
              showClose: true,
              message: '删除失败',
              type: 'error',
            })
            }
      });
     

     },
     updateClass(classitem){
      this.classdialogFormVisible = true;
      this.updateOrCreateClass = true;
       this.calssform.className=classitem.className;

       this.calssform.id = classitem.id;
      this.calssform.introduce=classitem.introduce;
      this.calssform.code=classitem.code;


     },

    },
    components:{
      CommonHeader,

    },
    computed:{
      
    }

}
    

</script>

<style lang="css" scoped>

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}


.list{
  
  background: white;
  margin-bottom:1rem;
  box-shadow: 5px 5px 5px 1px grey;
  
}
.courseItem-title h2{
  position: absolute;
  top: 0.1rem;
  left: 10rem;
  font-size: 1.5rem;
  font-weight: 400;
}


.courseItem-title-button{
  position: absolute;
  bottom: 0.1rem;
  left: 10rem;
  
}
.courseItem-title-button-span{
  margin-right: 0.6rem;
  
}

.courseItem{
 display: flex;
 flex-wrap: wrap;
 /* background: beige; */
 
}

.courseItem-title{
  position: relative;
  margin-bottom: -0.8rem;

}
.courseItem div{
  position: relative;
  margin: 0.7rem 0.5rem;
  background-image: linear-gradient(to bottom right, #1fbdb8, #47e894);
  border-radius: 0.3rem;
  border: 1px solid #EBEEF5;
  color: white;
  width: 24rem;
  height: 9rem;
  transition: all 0.5s;
}

.empty{
  background-image:linear-gradient(to bottom right, white, white)!important;

 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 4rem;
 
}

.courseItem div:hover{
  
  transform: translateY(-0.2rem);
}

.courseItem div:hover .courseItem-button{
  
   display: block;
}

.courseItem div h3{
  position: absolute;
  font-size: 1.5rem;
  font-weight: 400;
  top: 0.3rem;
  left: 1rem;
}
.courseItem div p{
  position: absolute;
  top: 45%;
  left: 1rem;
  font-size: 1.2rem;
  font-weight: 300;

}
.courseItem-span{
  position: absolute;
  
  left: 1rem;
  bottom: 0.3rem;
  font-size: 1rem;
  font-weight: 100;
  display: flex;
  align-items: center;
 
}
.courseItem-button{
  position: absolute;
  display: none;
  
  top: 0.6rem;
  right: 0.4rem;
  font-size: 1rem;
}
.courseItem div span:last-child{
  position: absolute;
  right: 1rem;
  bottom: 0.3rem;
  font-size: 1rem;
  font-weight: 100;

}
.el-main{
  height: 93%;
}
.el-header{
  height: 7%;
}
</style>